
'use client'
import React, { use, useEffect, useRef, useState } from 'react'
import { ChatOpenAI } from "@langchain/openai";
import { Annotation, MemorySaver, StateGraph } from "@langchain/langgraph/web";
import { BaseMessage, HumanMessage, SystemMessage } from "@langchain/core/messages";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { JsonOutputParser } from "@langchain/core/output_parsers";
import z, { number, uuid } from 'zod';
import { v4 } from 'uuid';


const model = new ChatOpenAI({
  modelName: "gemma3:12b",
  cache: false,
  configuration: {
    baseURL: "http://localhost:11434/v1",
    apiKey: "ollama",
  }
})

const agentCheckpointer = new MemorySaver();

const agent =  createReactAgent({
  llm: model,
  tools: [],
  checkpointSaver: agentCheckpointer,
  // responseFormat: z.object({
  //   response: z.string(),
  // }),

});

const Page = () => {
  const configRef = useRef({ configurable: { thread_id: v4() } })
  const [messages, setMessages] = useState<BaseMessage[]>([]);
  useEffect(() => {
    demo();
  }, [])
  
  const demo = async () => {
    console.log(111);
    

    const config = configRef.current;




    const response = await agent.stream({
      messages: [
        {
          role: "user",
          content: "1-10的日文"
        }
      ],
    }, { streamMode: "messages", ...config })

    for await (const chunk of response) {
      console.log(chunk[0].content);
      
      // setMessages([...messages, chunk])
    }

    // console.log(response.messages.at(-1)?.content);
    
    const a = await (agent.checkpointer as MemorySaver).get(config)
    
    

    console.log(a);



  }
  // const state = new StateGraph(z.object({
  //   number: number()
  // }))

  // const reduce = (del: number) => (number: { number: number }) => ({ number: number.number - del });

  // const add = (add: number) => (number: { number: number }) => ({ number: number.number + add });

  // const chain = state.addNode("reduce", reduce(4))
  //   .addNode("add", add(1))
  //   .addEdge("__start__", "reduce")
  //   .addEdge("reduce", "add")
  //   .addEdge("add", "__end__")
    
  //   .compile();
  // const graph = use(chain.invoke({ number: 10 }));
  
  // console.log(graph.number);

  
  return (
    <div>11</div>


  )
}

export default Page